<template>
  <Row>
    <Col span="24">
    <DatePicker type="date" placeholder="选择日期" style="width: 400px"></DatePicker>
    <Input placeholder="查询..." style="max-width: 600px;float: right;">
    <Button slot="append" icon="ios-search"></Button>
    </Input>
    </Col>
    <Col span="24">
    <Tabs value="name1">
      <TabPane :label="item.lable" :name="item.name" v-for="item in data">
        <Timeline>
          <TimelineItem v-for="i in item.timer">
            <p class="time">{{i.timeLine}}</p>
            <p class="content">{{i.doing}}</p>
          </TimelineItem>
        </Timeline>
      </TabPane>
    </Tabs>
    </Col>
  </Row>
</template>

<script>
  import bookApi from '@/api/bookApi'

  export default {
    data() {
      return {
        data: [{
          lable: '周一',
          name: 'Mon',
          timer: [{
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            },
            {
              timeLine: '09:30-10:00',
              doing: '暂无'
            }, {
              timeLine: '10:00-10:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }, {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }, {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            },
            {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            },
            {
              timeLine: '09:30-10:00',
              doing: '暂无'
            }, {
              timeLine: '10:00-10:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }, {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }, {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }, {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            },
            {
              timeLine: '09:30-10:00',
              doing: '暂无'
            }, {
              timeLine: '10:00-10:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }, {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }, {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }
          ]
        }, {
          lable: '周二',
          name: 'Tues',
          timer: [{
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            },
            {
              timeLine: '09:30-10:00',
              doing: '暂无'
            }, {
              timeLine: '10:00-10:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }, {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }, {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            },
            {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            },
            {
              timeLine: '09:30-10:00',
              doing: '暂无'
            }, {
              timeLine: '10:00-10:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }, {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }, {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }, {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            },
            {
              timeLine: '09:30-10:00',
              doing: '暂无'
            }, {
              timeLine: '10:00-10:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }, {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }, {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }
          ]
        }, {
          lable: '周三',
          name: 'Wen',
          timer: [{
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            },
            {
              timeLine: '09:30-10:00',
              doing: '暂无'
            }, {
              timeLine: '10:00-10:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }, {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }, {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            },
            {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            },
            {
              timeLine: '09:30-10:00',
              doing: '暂无'
            }, {
              timeLine: '10:00-10:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }, {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }, {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }, {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            },
            {
              timeLine: '09:30-10:00',
              doing: '暂无'
            }, {
              timeLine: '10:00-10:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }, {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }, {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }
          ]
        }, {
          lable: '周四',
          name: 'Thu',
          timer: [{
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            },
            {
              timeLine: '09:30-10:00',
              doing: '暂无'
            }, {
              timeLine: '10:00-10:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }, {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }, {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            },
            {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            },
            {
              timeLine: '09:30-10:00',
              doing: '暂无'
            }, {
              timeLine: '10:00-10:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }, {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }, {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }, {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            },
            {
              timeLine: '09:30-10:00',
              doing: '暂无'
            }, {
              timeLine: '10:00-10:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }, {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }, {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }
          ]
        }, {
          lable: '周五',
          name: 'Fri',
          timer: [{
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            },
            {
              timeLine: '09:30-10:00',
              doing: '暂无'
            }, {
              timeLine: '10:00-10:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }, {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }, {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            },
            {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            },
            {
              timeLine: '09:30-10:00',
              doing: '暂无'
            }, {
              timeLine: '10:00-10:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }, {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }, {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }, {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            },
            {
              timeLine: '09:30-10:00',
              doing: '暂无'
            }, {
              timeLine: '10:00-10:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }, {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }, {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }
          ]
        }, {
          lable: '周六',
          name: 'Sat',
          timer: [{
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            },
            {
              timeLine: '09:30-10:00',
              doing: '暂无'
            }, {
              timeLine: '10:00-10:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }, {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }, {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            },
            {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            },
            {
              timeLine: '09:30-10:00',
              doing: '暂无'
            }, {
              timeLine: '10:00-10:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }, {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }, {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }, {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            },
            {
              timeLine: '09:30-10:00',
              doing: '暂无'
            }, {
              timeLine: '10:00-10:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }, {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }, {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }
          ]
        }, {
          lable: '周日',
          name: 'Sun',
          timer: [{
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            },
            {
              timeLine: '09:30-10:00',
              doing: '暂无'
            }, {
              timeLine: '10:00-10:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }, {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }, {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            },
            {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            },
            {
              timeLine: '09:30-10:00',
              doing: '暂无'
            }, {
              timeLine: '10:00-10:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }, {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }, {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }, {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            },
            {
              timeLine: '09:30-10:00',
              doing: '暂无'
            }, {
              timeLine: '10:00-10:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }, {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }, {
              timeLine: '09:00-09:30',
              doing: '【技术部】-周常例会-预订人:李越涛'
            }
          ]
        }]
      }
    },
    methods: {

    },
    mounted() {},
    watch: {}
  }
</script>

<style scoped="scoped">
  .time {
    font-size: 14px;
    font-weight: bold;
  }
  
  .content {
    padding-left: 5px;
    float: right;
  }
</style>